<template>
	<div class="content" style="height: 100%;overflow: auto;">
		<navBar :navBar="navBar" :callback="onClickRight"></navBar>
		<div class="emptyBox"></div>
		<div class="con">
			<!-- <div class="title">{{ $t('收款方式') }}</div>
			<div @click="show = true"><input type="text" v-model="bizhong" :placeholder="$t('请选择')" disabled /></div> -->
			<div class="item" v-if="bizhong == 'USDT'">
				<div class="title">选择网络</div>
			</div>
			<div class="tabs" v-if="bizhong == 'USDT'">
				<div :class="tabid == 1 ? 'xuanzhong onetab' : 'wxuanzhong onetab'" @click="taptab(1)">ERC20</div>
				<div :class="tabid == 2 ? 'xuanzhong onetab' : 'wxuanzhong onetab'" @click="taptab(2)">TRC20</div>
				<!--div :class="tabid == 3 ? 'xuanzhong onetab' : 'wxuanzhong onetab'" @click="taptab(3)">OMNI</div-->
			</div>

			<div v-if="bizhong == 'Bank'">
				<div class="item">
					<div class="title">{{ $t('姓名') }}</div>
					<input type="text" v-model="name" :placeholder="$t('请输入姓名')" />
				</div>
				
				<div class="item">
					<div class="title">{{ $t('银行名称') }}</div>
					<input type="text" v-model="bank_name" :placeholder="$t('请输入银行名称')" />
				</div>
				
				<div class="item">
					<div class="title">开户行</div>
					<input type="text" v-model="bank_address" placeholder="请输入银行卡开户行" />
				</div>
				
				<div class="item">
					<div class="title">{{ $t('银行卡号') }}</div>
					<input type="text" v-model="addr" :placeholder="$t('请输入银行卡号')" />
				</div>
				
				<!-- <div class="item">
					<div class="title">{{ $t('银行卡号') }}</div>
					<input type="text" v-model="address" :placeholder="$t('银行卡号')" />
				</div> -->
				
				<!-- <div class="item">
					<div class="title">{{ $t('开户姓名') }}</div>
					<input type="text" v-model="name" :placeholder="$t('开户姓名')" />
				</div>
				
				<div class="item">
					<div class="title">{{ $t('开户人地址') }}</div>
					<input type="text" v-model="user_address" :placeholder="$t('开户人地址')" />
				</div>
				
				<div class="item">
					<div class="title">{{ $t('SWIFT') }}</div>
					<input type="text" v-model="swift" :placeholder="$t('SWIFT')" />
				</div> -->
			</div>
			<div v-else>
				<div class="item">
					<div class="title">提币地址</div>
				</div>
				<div class="item">
					<div class="title">{{ $t('姓名') }}</div>
					<input type="text" v-model="name" :placeholder="$t('请输入姓名')" />
				</div>
				<div class="item">
					<div class="title">{{ $t('充币地址') }}</div>
					<input type="text" v-model="addr" :placeholder="$t('钱包地址')" />
				</div>
				
				<!-- <div class="title">{{ $t('钱包二维码') }}</div>
				<div class="upload">
					<van-uploader :after-read="afterRead" result-type="text" v-if="!img" />
					<img v-else :src="$basePath + img" alt="" />
				</div> -->
			</div>

			<div class="btn">
				<van-button type="info" size="large" @click="sub">{{ $t('提交') }}</van-button>
			</div>
		</div>
		<!-- 选择币种 -->
		<van-popup v-model="show" position="bottom">
			<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="show = false" :confirm-button-text="$t('确定')" :cancel-button-text="$t('取消')" />
		</van-popup>
	</div>
</template>

<script>
import navBar from '@/components/navBar.vue';
import { Toast } from 'vant';
export default {
	name: 'recharge',
	components: { navBar },
	data() {
		return {
			money_type: '',
			country: '',
			bank_address: '',
			bank_name: '',
			user_address: '',
			swift: '',

			money_type_list: ['USD', 'CNY'],

			navBar: {
				back: true,
				title: this.$t('添加钱包地址'),
				close: false,
				btn: '',
				isBlue: false
			},
			num: '',
			bizhong: '',
			name: '',
			addr: '',
			show: false,
			columns: ['USDT', 'Bank'],
			tabid: 1,
			img: ''
		};
	},
	created() {
	  this.bizhong = this.$route.query.type;
	},
	mounted() {},

	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},
		onClickRight() {
			this.$router.push({
				name: 'onlineService'
			});
		},
		onConfirm(value, index) {
			this.bizhong = value;
			this.show = false;
			this.bizhong == 'USDT' ? (this.tabid = 1) : (this.tabid = '');
			this.navBar.title = this.bizhong == 'Bank' ? this.$t('添加银行卡') : this.navBar.title;
			console.log(this.navBar.title);
		},
		taptab(id) {
			this.tabid = id;
		},
		//上传图片
		afterRead(file) {
			let files = new FormData();
			files.append('file', file.file);
			$uploadAxios(api.uploadImg, files, res => {
				if (res.code == 0) {
					this.img = res.save_path;
				} else {
					this.$toast(this.$t(res.msg));
				}
			});
		},
		//添加钱包地址
		sub() {
			if (!this.bizhong) {
				this.$toast(this.$t('请选择币种'));
				return;
			}
			if (!this.addr) {
				this.$toast(this.$t('钱包地址不能为空'));
				return;
			}
			var lin = this.tabid == 1 ? 'ERC20' : this.tabid == 2 ? 'TRC20' : this.tabid == 3 ? 'OMNI' : '';
			$postAxios(
				api.addWallet,
				{
					type: this.bizhong,
					link: lin,
					addr: this.addr,
					name: this.name,
					// qr: this.img,
					// bank
					// money_type: this.money_type,
					// country: this.country,
					bank_address: this.bank_address,
					bank_name: this.bank_name,
					// user_address: this.user_address,
					// swift: this.swift,
				},
				res => {
					console.log(res);
					if (res.code == 0) {
						this.$toast(this.$t(res.msg));
						setTimeout(() => {
							this.$router.go(-1);
						}, 1000);
					}
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 100vh;
	height: auto;
	background-color: #21212b;
	.emptyBox {
		width: 100%;
		height: 40px;
	}
	.con {
		width: 100%;
		padding: 10px 20px;
		box-sizing: border-box;
		.item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1px solid #111;
			.title {
				flex: 1.5;
				padding: 10px 0;
				font-size: 14px;
				color: #fff;
			}
			input {
				flex: 4;
				padding: 0;
				width: 100%;
				height: 45px;
				color: #fff;
				display: block;
				font-size: 14px;
				// border-radius: 5px;
				border: none;
				// border: solid 1px #e6eaed;
				background-color: transparent;
				box-sizing: border-box;
			}
		}
		
		.tabs {
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.onetab {
				padding: 10px 25px;
				border-radius: 5px;
				font-size: 14px;
				margin-right: 20px;
			}
			.xuanzhong {
				background-color: #edd33a;
				color: #fff;
			}
			.wxuanzhong {
				background-color: #ffffff;
				color: #333;
			}
		}
		.upload {
			// width: 120px;
			// height: 120px;
			// background-color: #f8f8fb;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			border-radius: 10px;
			margin-top: 10px;
			img {
				width: 80px;
				height: 80px;
				// margin: 20px 0;
			}
			// span {
			//   font-size: 14px;
			//   color: #333333;
			// }
		}
		.btn {
			margin-top: 50px;
			width: 100%;
			.van-button {
			  // margin-top: 30px;
				height: 40px;
			  background: #edd33a;
			  border-radius: 5px;
			  color: #333;
			  border-color: transparent;
			}
		}
	}
}
</style>
